<template>
  <div class="box">
      <div>
        <h2>聊天登录界面</h2>
        <div class="login">           
          <div>
            <h4>用户登录</h4>
            <form action="">
              <div style="border-radius:5px;">
              <van-cell-group>
              <div class="inputmsg">
                <van-field
                  v-model="uname"
                  label="用户名"
                  label-width=50
                  left-icon="manager"
                  placeholder="请输入用户名"
                  required
                />
            </div>
            <div style="margin-top:15px" class="inputmsg">
               <van-field
                  v-model="upwd"
                  label-width=50
                  label="文本"
                  left-icon="lock"
                  placeholder="请输入密码"
                  required
                  type="password"
                />
            </div>
            </van-cell-group>  
            </div> 
              <div class="loginmsg"><input type="checkbox" name="" id="usermsg">
               <label for="usermsg">记住我的登录信息</label>
              </div>  
              <div class="loginbtn">
              <van-button type="info" size="large">登录</van-button>   
          </div>
            </form>
                     
      
          </div>
        </div>
         
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        uname: '',
        upwd:'',
      }
    },
  }
</script>

<style lang="scss" scoped>
  
  .box{
    font-family: "微软雅黑";
    background:url('/images/bg.jpg') no-repeat center center;
    overflow: hidden;
    background-attachment: fixed;
    // height: 667px;
    height: 100%;
    width: 100%;
    color:white;
    // padding: 0 10px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // position: relative;

    h2{
      font-size: 30px;
      margin:10px 0;
    }
    >div{
      width: 75%;
      height: 40%;
      text-align: center;
      position: relative;
      margin:0 auto;
      top:40%;
      transform: translateY(-50%);
      >.login{
        border-radius: 5px;
        height: 100%;
        // width: 100%;
        // background-color: green;
        background-color: #000a;
        display: flex;
        // align-items: center;
        justify-content: center;
        padding: 10px;
        >div{
          margin:5px 0 10px;
        }
        h4{
          margin:0 0 10px;
        }
      }
    }
    .loginmsg{
      input{
        vertical-align: middle;
      }
      position: relative;
      left: 5px;
      top:10px;
      margin-bottom: 20px;
      margin-left: -50%;
      font-size: 14px;
    }
    .loginbtn{
      position: relative;
      top:35px;

    }
  }

</style>